<template>
  <div class="app-container">
    <div class="grid-container">
      <a-row class="grid-table-tool">
        <a-col :span="24" class="tool-action">
          <a-input v-model="params.key" placeholder="请输入关键词" @keyup.enter="handleSearch" style="width:300px;margin-right:10px;"></a-input>

          <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          <a-button icon="plus-circle"  @click="handleAdd" >新增</a-button>
        </a-col>
      </a-row>
      <a-table :columns="columns" :dataSource="resp.dataList" class="grid-table" :rowSelection="rowSelection" :pagination="false" bordered>
          <template slot="operation" slot-scope="text,record,index">
            <a-button type="primary" size="small" plain @click="handleEdit(index, record)">编辑</a-button>
            <disable name="删除" :rowId="record.id.toString()" @emit="handleDelete"></disable>
          </template>
      </a-table>
      <a-row class="grid-table-tool">
        <a-col :span="8" class="tool-action">&nbsp;</a-col>
        <a-col :span="16" class="tool-pagination">
          <a-pagination v-model="params.page" :pageSize.sync="params.pageSize" showSizeChanger @showSizeChange="handleSizeChange" @change="handleCurrentChange" :total="resp.total" v-if="resp.total>params.pageSize" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
  import {findList,deleteOne} from "../../api/${entity.code}";
  import Disable from "@/components/Disable";

  const columns = [
    { title: '操作', key: 'operation', scopedSlots: { customRender: 'operation' } ,align:'center',width:'130px'},
    ## for(item in entity.generalList) {
      ## if(item.isId == true){continue;}
      ## if(item.name == "deleted" ){continue;}
      ## if(item.name == "createAt" ){continue;}
      ## if(item.name == "creatorId" ){continue;}
      ## if(item.name == "modifyAt" ){continue;}
      ## if(item.name == "modifierId" ){continue;}
      { title: '${item.displayName}', dataIndex: '${item.name}', key: '${item.name}', align:'center'},
    ## }
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('selectedRowKeys:',selectedRowKeys , 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
  };
  export default {
    name:"${entity.code}List",
    components:{Disable},
    data(){
      return{
        columns,
        rowSelection,
        resp:{
          dataList:[],
          total:0,
        },
        params: {
          key:null,
          page: 1, pageSize: 10,
          order: null, sort: null
        },
        pageSizes:[10,20,30],
        loading:false,
      }
    },
    methods:{
      handleCurrentChange(current, pageSize){
        this.params.page = current;
        this.init();
      },
      handleSizeChange(current, pageSize){
        this.params.pageSize = pageSize;
        this.init();
      },
      handleAdd(){
        this.$router.push({name: '${entity.name}Detail'})
      },
      handleEdit(index,row){
        this.$router.push({name: '${entity.name}Detail',query:{id:row.id}})
      },
      async handleDelete(id,name) {
        this.loading = true;
        if(name == '删除') {
          let resp = await deleteOne(id)
          this.loading = false;
          if(this.qUtil.validResp(resp)) {
            this.$message.success('删除成功!');
            if(this.resp.dataList.length===1 && this.params.page>1){
              this.params.page--;
            }
            this.init();
          }
          else this.$message.warning(resp.msg||'删除失败');
        }
      },
      handleSearch(){
        this.params.page = 1;
        this.init();
      },
      async init(){
        this.loading = true;
        let resp = await findList(this.params);
        this.loading = false;
        if(this.qUtil.validResp(resp)){
          this.resp = resp.data;
        }
      }
    },
    mounted(){
      this.init();
    }
  }
</script>
<style>
  .web-user-list .el-table,.web-user-list .el-table th{
    text-align: center;
  }
</style>
